 
<script lang="tsx">
// 拖拽物料列表 
import { PropType, defineComponent, h } from 'vue'; 
 
export default defineComponent({
      name:'DargItem', 
      props:{
        tag:{
            type:String as PropType<String>,
            default:()=>'div'
        },
        className:{
            type:String as PropType<String>,
            default:()=>'divs'
        },
        lists:{
            type:Array as PropType<Array<any>>,
            default:()=>[]
        }
      },
      setup(props,{slots}){ 
        let maps = {}; 
        // 拖拽-数据传递
        function drag(ev){ 
        ev.dataTransfer.setData("info",JSON.stringify(maps[ev.target.id]));  
        } 
        const items = ()=>(
           <>
             {
                props.lists.map(item=>{
                    maps[item.uid]=item; 
                    return (<div draggable={item.isdarg} onDragstart={drag} class='items' id={item.uid}>拖拽控件</div>)
                })
             }
           </>
        )   
        // 仿照dargable 当鼠标点击的时候通过冒泡
        return ()=>h(props.tag,{class:props.className},h(items))
      }
})



</script>
<style lang="less">
.ditems{
    width: 0;
    height: 0;
    overflow: hidden;
    visibility: hidden;
}
.items{
  background: #eee;
  padding: .5rem;
  border: 1px solid #007fff;
   
}
.divs{
  width: 100px;
}
 
</style>